.forward-scroll-box::-webkit-scrollbar {
    display: none
}

.forward-scroll-box::-webkit-scrollbar-track-piece {
    background: #0e1d28
}

.forward-scroll-box::-webkit-scrollbar-thumb {
    background: #2d6358;
    border: none
}

.forward-scroll-box {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden
}

.info-container {
    width: 100%;
    height: 100vh;
    background: #4774b4;
    position: relative;
    overflow-y: hidden
}

.map-box {
    height: 100%;
    width: 100%;
    position: absolute
}

.top-container {
    width: 100%;
    height: 4.6875rem;
    position: absolute;
    background: linear-gradient(90deg,rgb(0 26 65 / 90%) 0%,rgb(0 26 65 / 80%) 12%,rgb(0 26 65 / 40%) 24%,rgb(0 26 65 / 40%) 76%,rgb(0 26 65 / 80%) 88%,rgb(0 26 65 / 90%) 100%)
}

.top-box {
    width: 100%;
    height: 4.6875rem;
    background-image: url(@/assets/sys-title-bg.png);
    background-size: 100% 100%
}

.user-work-box {
    position: absolute;
    right: 2rem;
    top: 2rem;
    display: flex;
    cursor: pointer
}

.icon-work-box {
    width: 2rem;
    height: 2rem;
    border: 1px solid #445773;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-left: 1rem
}

.workbench-box {
    width: 6rem;
    height: 2rem;
    border: 1px solid #445773;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 20px;
    margin-left: 1rem;
    color: #cfe5ff;
    cursor: pointer
}

.icon-inform {
    width: 1.125rem;
    height: 1.125rem;
    background-image: url(@/assets/icon-inform.svg);
    background-size: 100% 100%
}

.icon-profile {
    width: 1.125rem;
    height: 1.125rem;
    background-image: url(@/assets/icon-profile.svg);
    background-size: 100% 100%
}

.icon-work {
    width: 1.125rem;
    height: 1.125rem;
    background-image: url(@/assets/icon-work.svg);
    background-size: 100% 100%
}

.title-box {
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 4.6875rem;
    letter-spacing: .4375rem;
    color: #f1f6fb;
    text-shadow: 0 0 7px #2BBFFF,0 4px 4px rgb(0 41 105 / 80%);
    text-transform: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.left-box {
    width: 24%;
    height: calc(100% - 4.6875rem);
    position: absolute;
    top: 4.6875rem;
    background: linear-gradient(90deg,rgb(0 26 65 / 90%) 0%,rgb(0 26 65 / 80%) 50%,rgb(0 26 65 / 40%) 100%);
    z-index: 999
}

.middle-box {
    position: absolute;
    height: 4.6875rem;
    top: 4.6875rem;
    left: 24%;
    width: 52%;
    background: linear-gradient(180deg,rgb(0 26 65 / 40%) 0%,rgb(0 26 65 / 40%) 90%,rgb(0 26 65 / 0%) 100%);
    display: flex;
    font-size: 1rem;
    color: #fff;
    align-items: center;
    justify-content: space-around
}

.right-box {
    width: 24%;
    height: calc(100% - 4.6875rem);
    position: absolute;
    top: 4.6875rem;
    right: 0;
    background: linear-gradient(270deg,rgb(0 26 65 / 90%) 0%,rgb(0 26 65 / 80%) 50%,rgb(0 26 65 / 40%) 100%)
}

.antiskid-stats-box {
    width: calc(100% - 1rem);
    height: 50%;
    margin-left: 1rem
}

.antiskid-content-box {
    height: calc(100% - 3.3125rem);
    width: calc(100% - .5rem);
    margin-top: .5rem
}

.antiskid-details {
    width: 100%;
    height: 32%;
    display: flex;
    justify-content: space-around;
    text-align: center
}

.antiskid-details-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center
}

.antiskid-stats-char-box {
    width: 100%;
    height: 68%;
    position: relative
}

.antiskid-week-box {
    position: absolute;
    right: 0;
    display: flex
}

.antiskid-week {
    background: rgb(0 111 214 / 40%);
    color: #cfe5ff;
    font-size: .75rem;
    width: 2.75rem;
    height: 1.625rem;
    text-align: center;
    line-height: 1.625rem;
    cursor: pointer;
    z-index: 99
}

.antiskid-week-active {
    background: linear-gradient(0deg,#1862C9 0%,#58AFFF 100%)
}

.antiskid-details-num {
    font-size: 1.5rem;
    color: #fff
}

.antiskid-details-name {
    font-size: .875rem
}

.antiskid-state-box {
    width: 100%;
    height: 2.8125rem;
    background-size: 100% 100%
}

.antiskid-state1-box {
    background-image: url(@/assets/num-bg1.svg)
}

.antiskid-state2-box {
    background-image: url(@/assets/num-bg2.svg)
}

.antiskid-state3-box {
    background-image: url(@/assets/num-bg3.svg)
}

.antiskid-state4-box {
    background-image: url(@/assets/num-bg4.svg)
}

.alarm-stats-box {
    width: calc(100% - 1rem);
    height: 50%;
    margin-left: 1rem
}

.alarm-content-box {
    height: calc(100% - 3.3125rem);
    width: calc(100% - 1rem);
    margin-top: .5rem
}

.alarm-details-box {
    width: 100%;
    height: 25%;
    display: flex
}

.alarm-info-box {
    width: 100%;
    height: calc(75% - 1rem);
    margin-top: .5rem;
    overflow-y: auto
}

.alarm-info-box::-webkit-scrollbar {
    width: 4px;
    height: 4px
}

.alarm-info-box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgb(255 255 255 / 40%)
}

.alarm-info-box::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #0003;
    border-radius: 0;
    background: rgb(80 80 80 / 50%)
}

.alarm-item-box {
    width: 100%;
    margin-top: .5rem;
    color: #fff;
    background: linear-gradient(90deg,rgb(75 186 255 / 20%) 0%,rgb(75 186 255 / 0%) 100%)
}

.alarm-name-box {
    width: calc(100% - 2rem);
    margin-left: 1rem;
    margin-top: .5rem;
    display: flex;
    align-items: center
}

.alarm-icon-box {
    height: 1rem;
    width: 1.25rem;
    background-image: url();
    background-size: 100% 100%
}

.alarm-name {
    flex: 1;
    font-weight: 700;
    font-size: .875rem;
    color: #fff;
    margin-left: .8rem
}

.alarm-time {
    flex: 1;
    font-size: .8rem;
    color: #cfe5ff;
    margin-left: .8rem
}

.alarm-content {
    font-size: .8rem;
    margin-left: 1.2rem;
    color: #cfe5ff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.alarm-details-item {
    flex: 1;
    height: 100%;
    margin-left: 1rem;
    background-image: url(@/assets/num-bg.png);
    background-size: 100% 100%;
    color: #fff;
    text-align: center
}

.alarm-details-item-text {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.alarm-details-item-num {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(180deg,#FFF 34%,#8AE0FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.icon-skate-right {
    width: 2.125rem;
    height: 1.5rem;
    -webkit-clip-path: polygon(0 0,100% 100%,0 100%);
    clip-path: polygon(0 0,100% 100%,0 100%);
    border-radius: 2px
}

.flicker {
    animation: flicker-ad6c41f0 1s infinite
}

@keyframes flicker-ad6c41f0 {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.icon-skate-left {
    width: 2.125rem;
    height: 1.5rem;
    -webkit-clip-path: polygon(100% 0,100% 100%,0 100%);
    clip-path: polygon(100% 0,100% 100%,0 100%);
    border-radius: 2px
}

.icon-spanner {
    width: 1.625rem;
    height: 1.625rem;
    background-image: url();
    background-size: 100% 100%
}

.icon-utensil-box {
    width: 1.625rem;
    height: 1.625rem;
    background-image: url();
    background-size: 100% 100%
}

.device-stats-box {
    width: 100%;
    height: 25%
}

.skate-stats-box {
    width: 100%;
    height: 50%
}

.device-total-box {
    font-size: 1rem;
    width: 6rem;
    height: 5rem;
    margin-left: 1rem;
    background-image: url(@/assets/num-bg.png);
    background-size: 100% 100%;
    color: #fff;
    text-align: center
}

.device-total {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(180deg,#FFF 34%,#8AE0FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.device-details {
    display: flex;
    width: calc(100% - 6.6rem)
}

.device-details-box {
    display: flex;
    align-items: center;
    width: 33%;
    justify-content: center
}

.stats-info-box {
    width: calc(100% - 3px);
    display: flex;
    flex-direction: column;
    align-items: center
}

.stats-text {
    color: #99d4ff;
    font-size: 1rem
}

.stats-num {
    font-size: 1.5rem
}

.halving {
    height: 50%;
    width: 2px
}

.halving-image {
    background-image: linear-gradient(180deg,rgb(178 224 255 / 0%) 0,rgb(178 224 255 / 60%) 60%,rgb(178 224 255 / 0%) 100%)
}

.spanner-stats-box {
    width: 100%;
    height: 50%
}

.fortify-task-box {
    width: calc(100% - 1rem);
    height: 35%;
    margin-left: 1rem
}

.item-title-box {
    width: 100%;
    height: 2.8125rem;
    background-image: url(@/assets/title-bg.png);
    background-size: 100% 100%
}

.item-title-name {
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff;
    margin-left: 2rem;
    text-shadow: 0 0 0 rgb(0 38 101 / 70%);
    line-height: 2.8125rem
}

.fortify-table-box {
    width: calc(100% - 1rem);
    height: calc(100% - 3.8125rem);
    margin-top: .5rem
}

.tabs-box {
    display: flex;
    white-space: nowrap;
    overflow-x: auto
}

.tabs-box::-webkit-scrollbar {
    width: 4px;
    height: 4px
}

.tabs-box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgb(255 255 255 / 40%)
}

.tabs-box::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #0003;
    border-radius: 0;
    background: rgb(80 80 80 / 50%)
}

.tab-name {
    flex: 0 0 auto;
    min-width: 3.38rem;
    height: 1.63rem;
    line-height: 1.63rem;
    background: rgb(0 111 214 / 40%);
    font-size: .75rem;
    color: #cfe5ff;
    display: flex;
    justify-content: center;
    cursor: pointer;
    float: left
}

.tab-name-activity {
    background: linear-gradient(0deg,#1862C9 0%,#58AFFF 100%)
}

.fortify-table-container {
    width: 100%;
    height: calc(100% - 1.63rem)
}

.fortify-table {
    height: 100%
}

.watch-box {
    width: calc(100% - 1rem);
    height: 40%;
    margin-left: 1rem
}

.watch-content-box {
    width: calc(100% - 1rem);
    height: calc(100% - 3.8125rem);
    margin-top: .5rem
}

.watch-captain {
    width: 100%;
    height: 50%;
    display: flex
}

.captain-photo-box {
    height: 100%;
    width: 25%
}

.captain-info-box {
    height: 100%;
    width: 75%;
    color: #fff;
    display: flex;
    margin-left: 1rem
}

.captain-item-box {
    width: 50%;
    height: 100%;
    margin-top: 5%
}

.captain-text {
    font-size: 1rem;
    color: #99d4ff;
    margin-top: .3rem
}

.captain-info {
    font-size: 1.125rem;
    color: #fff;
    margin-top: .3rem
}

.captain-phone {
    font-size: .875rem;
    color: #fff;
    margin-top: .3rem
}

.watch-captain-member {
    margin-top: .5rem;
    width: 100%;
    height: calc(50% - .5rem);
    overflow-y: auto
}

.watch-captain-member::-webkit-scrollbar {
    width: 4px;
    height: 4px
}

.watch-captain-member::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgb(255 255 255 / 40%)
}

.watch-captain-member::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #0003;
    border-radius: 0;
    background: rgb(80 80 80 / 50%)
}

.team-member-box {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    color: #cfe5ff
}

.member-num-box {
    width: 1.75rem;
    height: 1.125rem;
    line-height: 1.125rem;
    text-align: center;
    background: linear-gradient(270deg,rgb(0 49 113 / 0%) 0%,rgb(36 68 116 / 80%) 50%,rgb(36 68 116 / 80%) 100%),linear-gradient(108deg,rgb(100 195 255 / 80%) 0%,rgb(43 173 255 / 0%) 100%);
    border: 1px solid;
    -o-border-image: linear-gradient(342deg,rgb(116 200 255 / 0%),rgb(156 231 255 / 100%)) 1 1;
    border-image: linear-gradient(342deg,rgb(116 200 255 / 0%),rgb(156 231 255 / 100%)) 1 1
}

.member-text {
    color: #cfe5ff;
    font-size: 1rem;
    margin-left: 1rem
}

.member-item-box {
    display: flex;
    align-items: center
}

.text-box {
    margin-left: .5rem
}

.flex {
    display: flex
}

.gap {
    gap: 1rem
}

.buttons-box {
    position: absolute;
    top: 9.375rem;
    right: 24%
}

.btn-box {
    width: 7.5rem;
    height: 2.625rem;
    line-height: 1.8rem;
    background-image: url(@/assets/btn-bg.png);
    background-size: 100% 100%;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    color: #cfe5ff;
    cursor: pointer
}

.not-data-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    color: #6499d1;
    text-align: center
}

.not-data-box:before {
    content: "";
    width: 6.875rem;
    height: 6.875rem;
    background-image: url(@/assets/not-data.png);
    background-size: 100% 100%
}

.not-data-box:after {
    content: "\6682\65e0\6570\636e"
}

 .n-data-table .n-data-table-empty {
    padding: 0
}

 .n-data-table .n-data-table-th {
    background: rgb(0 111 214 / 30%);
    font-size: .88rem;
    color: #78c1ff
}

 .n-data-table .n-data-table-table, .n-data-table .n-data-table-thead {
    background: transparent
}

 .n-data-table.n-data-table--bordered .n-data-table-wrapper {
    border: 0;
    border-top: 1px solid #1B7AB1
}

 .n-data-table .n-data-table-th {
    border: 0
}

 .n-data-table .n-data-table-td {
    background-color: transparent;
    border-bottom: 0;
    color: #fff
}

 .n-data-table .n-data-table-tr:not(.n-data-table-tr--summary):hover {
    background-color: transparent
}

 .n-data-table .n-data-table-tr:not(.n-data-table-tr--summary):hover>.n-data-table-td {
    background-color: transparent
}

 .n-data-table.n-data-table--bordered .n-data-table-wrapper {
    overflow-y: auto
}

 .n-data-table.n-data-table--bordered .n-data-table-wrapper::-webkit-scrollbar {
    width: 4px;
    height: 4px
}

 .n-data-table.n-data-table--bordered .n-data-table-wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgb(255 255 255 / 40%)
}

 .n-data-table.n-data-table--bordered .n-data-table-wrapper::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #0003;
    border-radius: 0;
    background: rgb(80 80 80 / 50%)
}

.tag-all {
    width: 80%;
    height: 96%;
    margin-left: 10px;
    padding-left: 13px;
    cursor: pointer
}

.row-arrows {
    background: linear-gradient(90deg,rgba(75,186,255,.2) 0%,rgba(75,186,255,0) 100%);
    border-bottom: 1px solid #ffffff
}

.avatar {
    display: flex;
    align-items: center;
    height: 34px
}
